<template>
    <!-- 使用Element UI的Select组件创建一个下拉选择框 -->
    <el-select
      class="input-default-width w-container"
      size="large"
      placeholder="搜索赛项"
      clearable
      filterable
      remote
      :remote-method="handleRemoteMethod"
      :loading="loading"
      @change="handleChange"
    >
      <!-- 使用v-for渲染选项列表 -->
      <el-option
        v-for="item in data"
        :key="item"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </template>
  
  <script  setup>
  // 导入后端API接口
  import { GetEventsNotApi } from "@/api/manage/institution";
  //导入Vue的响应式引用和生命周期钩子
  import { ref } from "vue";
  
  // 定义一个响应式变量data，用于存储选项数据
  const data = ref([]);
  // 定义一个响应式变量loading，用于表示加载状态
  const loading = ref(false);
  // 使用defineEmits定义一个事件'title-change'
  const emit = defineEmits("title-change");
  // 定义handleChange方法，当选项变化时触发
  const handleChange = (value) => {
    const find = data.value.find((item) => item.value == value);
    if (find) {
      emit("title-change", find.label);
    } else {
      emit("title-change", "全部赛项");
    }
  };
  /**
   * 远程搜索
   */
  const handleRemoteMethod = async (query) => {
    if (!query) {
      return;
    }
    loading.value = true;
    let res = await GetEventsNotApi({
      eventName: query,
    });
    if (res.success) {
      // 如果接口调用成功，更新data为新的选项列表
      data.value = res.entityList.map((item) => {
        return {
          label: item.name + `(${item.playingTime})`, // 选项标签为赛项名称和比赛时间
          value: item.rootId, // 选项值为赛项的唯一标识
        };
      });
    } else {
      // 如果接口调用失败，清空选项列表
      data.value = [];
    }
    // 完成数据加载，设置loading状态为false
    loading.value = false;
  };
  </script>
  
  <style lang="scss" scoped>
  .w-container {
    --el-input-width: 156px !important;
    :deep(.el-input) {
      --el-input-width: 156px !important;
    }
  }
  </style>